<!--
 * @Author: your name
 * @Date: 2020-04-17 00:21:20
 * @LastEditTime: 2020-05-16 23:15:28
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \museweb\src\components\muse\banner\banner.vue
--> 
<template>
    <div>
        <el-upload
                class="avatar-uploader"
                :http-request="(fileObj) => handleAvatarSuccess(fileObj)"
                multiple
                :show-file-list="false">
            <el-button type="primary" size="small" >添加图片</el-button>
        </el-upload>
        <ul class="img_ul">
            <draggable v-model="value" style="display: flex;">
                <li class="img_li" v-for="(item, index) in value" :key="index">
                    <img :src="item" alt="">
                    <i @click="removeImg(index)" class="el-icon-delete img_delete"></i>
                </li>
            </draggable>
        </ul>
    </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import uploadMixin from '@/views/musePage/mixins/uploadMixin'
  export default {
    name: 'banner',
    mixins: [uploadMixin],
    components: { draggable },
    props: {
      value: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
      }
    },
    watch: {
      value: function () {
        this.$emit('input', this.value)
      }
    },
    methods: {
      // 单图片上传
      async handleAvatarSuccess(file) {
        const url = await this.fnUpload(file)
        this.value.push(url)
        this.$emit('input', this.value)
      },
      removeImg(index) {
        this.value.splice(index, 1)
        this.$emit('input', this.value)
      }
    }
  }
</script>

<style lang="scss" scoped>
    .img_ul {
        list-style: none;
        margin:0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .img_li {
        margin-right: 10px;
        position: relative;
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
        overflow: hidden;

        &>img{
            width: 100%;
            height: 100%;
        }
    }

    .img_delete {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 25px;
        color: red;
        cursor: pointer;
    }
</style>
